<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts'
import FlexCenter from "@/zdpui/components/flex/FlexCenter.vue";

// 接收外部的属性
const props = defineProps({
  // 图表的配置项
  option: {
    type: Object,
    required: true,
  }
})

// 图表dom元素的引用
const refEcharts = ref()
const chart = ref()

// 监听options的修改
watch(() => props.option, (newVal, oldVal) => {
  chart.value.setOption(newVal)
})

// 初始化图表
onMounted(() => {
  // 初始化dom，将其设置为图表要渲染的元素
  chart.value = echarts.init(refEcharts.value)
  // 渲染图表
  chart.value.setOption(props.option)
})
</script>
<template>
  <FlexCenter>
    <div ref="refEcharts" class="lgChart"></div>
  </FlexCenter>
</template>

<style scoped>
.lgChart {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 95px);
  min-width: calc(100vw - 60px);
  padding: 30px 15px;
}
</style>